<template>
  <div class="show-main">
    <el-scrollbar style="height:100%">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline" size="small">
        <el-form-item label="">
          <el-date-picker v-model="searchForm.date" unlink-panels type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="dateChange" value-format="yyyy-MM-dd" :clearable="false">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.stop="search">搜索</el-button>
          <el-button type="primary" @click.stop="reload">刷新</el-button>
          <el-button v-if="info.type == 1 || (info.type == 4 && info.ptype == 1)" type="primary" @click.stop="drawInfo(1)">给平台划账明细
          </el-button>
          <el-button v-if="info.type == 1 || (info.type == 4 && info.ptype == 1)" type="primary" @click.stop="drawInfo(2)">给运营划账明细
          </el-button>
          <el-button v-if="info.type == 2 || (info.type == 4 && info.ptype == 2)" type="primary" @click.stop="drawInfo(3)">给运营划账明细
          </el-button>
          <el-button v-if="info.type == 3 || (info.type == 4 && info.ptype == 3)" type="primary" @click.stop="drawInfo(4)">给商户划账明细
          </el-button>
          <el-button v-if="info.type == 3 || (info.type == 4 && info.ptype == 3)" type="primary" @click.stop="drawInfo(5)">给骑手划账明细
          </el-button>
        </el-form-item>
      </el-form>
      <el-table :data="table" border size="small">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="order_no" label="订单编号" width="100"></el-table-column>
        <el-table-column v-if="info.type == 1 || (info.type == 4 && info.ptype == 1)" prop="total_price" label="总价">
          <template slot-scope="scope">
            ¥{{scope.row.total_price}}
          </template>
        </el-table-column>
        <el-table-column v-if="info.type == 1 || (info.type == 4 && info.ptype == 1)" prop="goods_price" label="商品价">
          <template slot-scope="scope">
            ¥{{scope.row.goods_price}}
          </template>
        </el-table-column>

        <el-table-column v-if="info.type == 1 || (info.type == 4 && info.ptype == 1)" prop="company_price" label="公司收费">
          <template slot-scope="scope">
            ¥{{scope.row.company_price}}
          </template>
        </el-table-column>
        <el-table-column v-if="info.type == 1 || info.type == 2 || (info.type == 4 && info.ptype == 1)|| (info.type == 4 && info.ptype == 2)" prop="plat_price" label="平台收费">
          <template slot-scope="scope">
            ¥{{scope.row.plat_price}}
          </template>
        </el-table-column>
        <el-table-column prop="operate_price" label="运营收费">
          <template slot-scope="scope">
            ¥{{scope.row.operate_price}}
          </template>
        </el-table-column>
        <el-table-column prop="store_price" label="商户收费">
          <template slot-scope="scope">
            ¥{{scope.row.store_price}}
          </template>
        </el-table-column>
        <el-table-column prop="pid_price" label="推广收费">
          <template slot-scope="scope">
            ¥{{scope.row.pid_price}}
          </template>
        </el-table-column>
        <el-table-column prop="delivery_price" label="配送费">
          <template slot-scope="scope">
            ¥{{scope.row.delivery_price}}
          </template>
        </el-table-column>
        <el-table-column prop="company_status" label="公司划账">
          <template slot-scope="scope">
            {{scope.row.company_status == 1 ?'已划':'未划'}}
          </template>
        </el-table-column>
        <el-table-column prop="plat_status" label="平台划账">
          <template slot-scope="scope">
            {{scope.row.plat_status  == 1 ?'已划':'未划'}}
          </template>
        </el-table-column>
        <el-table-column prop="operate_status" label="运营商户划账">
          <template slot-scope="scope">
            {{scope.row.operate_status  == 1 ?'已划':'未划'}}
          </template>
        </el-table-column>
        <el-table-column prop="send_status" label="运营骑手划账">
          <template slot-scope="scope">
            {{scope.row.send_status  == 1 ?'已划':'未划'}}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            {{statusName(scope.row.status)}}
          </template>
        </el-table-column>
        <el-table-column prop="is_pay" label="支付">
          <template slot-scope="scope">
            {{scope.row.is_pay  == 1 ?'已支付':'未支付'}}
          </template>
        </el-table-column>
        <el-table-column prop="pay_type" label="支付类型">
          <template slot-scope="scope">
            {{scope.row.pay_type  == 1 ?'积分':'微信'}}
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间"></el-table-column>
      </el-table>
      <div class="page">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.page" :page-sizes="[10,20,30,40]" :page-size="searchForm.limit"
          layout="total, sizes, prev, pager, next, jumper" :total="count">
        </el-pagination>
      </div>
      <el-dialog title="给平台划账明细" :visible.sync="superToPlatVisible" width="500px" :before-close="handleClose">
        <el-table :data="superToPlatTable" border size="small" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="name" label="平台方"></el-table-column>
          <el-table-column prop="bank_no" label="银行卡号"></el-table-column>
          <el-table-column prop="bank_name" label="开户行"></el-table-column>
          <el-table-column prop="money" label="转账金额">
            <template slot-scope="scope">
              ¥{{scope.row.money}}
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close('superToPlatVisible')" size="small">取 消</el-button>
          <el-button type="primary" @click="draw('superToPlatVisible', 1)" size="small">划 账</el-button>
        </span>
      </el-dialog>
      <el-dialog title="给运营划账明细" :visible.sync="superToOperateVisible" width="750px" :before-close="handleClose">
        <el-table :data="superToOperateTable" border size="small" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="plat_name" label="平台"></el-table-column>
          <el-table-column prop="plat_bank_no" label="平台卡号"></el-table-column>
          <el-table-column prop="plat_bank_name" label="平台开户行"></el-table-column>
          <el-table-column prop="plat_money" label="平台转账金额">
            <template slot-scope="scope">
              ¥{{scope.row.plat_money}}
            </template>
          </el-table-column>
          <el-table-column prop="operate_name" label="运营"></el-table-column>
          <el-table-column prop="operate_bank_no" label="运营卡号"></el-table-column>
          <el-table-column prop="operate_bank_name" label="运营开户行"></el-table-column>
          <el-table-column prop="operate_money" label="运营转账金额">
            <template slot-scope="scope">
              ¥{{scope.row.operate_money}}
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close('superToOperateVisible')" size="small">取 消</el-button>
          <el-button type="primary" @click="draw('superToOperateVisible', 2)" size="small">划 账</el-button>
        </span>
      </el-dialog>
      <el-dialog title="给运营划账明细" :visible.sync="platToOperateVisible" width="500px" :before-close="handleClose">
        <el-table :data="platToOperateTable" border size="small" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="operate_name" label="运营"></el-table-column>
          <el-table-column prop="operate_bank_no" label="运营卡号"></el-table-column>
          <el-table-column prop="operate_bank_name" label="运营开户行"></el-table-column>
          <el-table-column prop="money" label="运营转账金额">
            <template slot-scope="scope">
              ¥{{scope.row.money}}
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close('platToOperateVisible')" size="small">取 消</el-button>
          <el-button type="primary" @click="draw('platToOperateVisible', 3)" size="small">划 账</el-button>
        </span>
      </el-dialog>
      <el-dialog title="给商户划账明细" :visible.sync="toStoreVisible" width="500px" :before-close="handleClose">
        <el-table :data="toStoreTable" border size="small" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="shop_name" label="店铺名称"></el-table-column>
          <el-table-column prop="bank_no" label="商户卡号"></el-table-column>
          <el-table-column prop="bank_address" label="商户开户行"></el-table-column>
          <el-table-column prop="money" label="商户转账金额">
            <template slot-scope="scope">
              ¥{{scope.row.money}}
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close('toStoreVisible')" size="small">取 消</el-button>
          <el-button type="primary" @click="draw('toStoreVisible', 4)" size="small">划 账</el-button>
        </span>
      </el-dialog>
      <el-dialog title="给骑手划账明细" :visible.sync="toSenderVisible" width="500px" :before-close="handleClose">
        <el-table :data="toSenderTable" border size="small" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="name" label="真实姓名"></el-table-column>
          <el-table-column prop="bank_no" label="卡号"></el-table-column>
          <el-table-column prop="bank_name" label="开户行"></el-table-column>
          <el-table-column prop="money" label="转账金额">
            <template slot-scope="scope">
              ¥{{scope.row.money}}
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close('toSenderVisible')" size="small">取 消</el-button>
          <el-button type="primary" @click="draw('toSenderVisible', 5)" size="small">划 账</el-button>
        </span>
      </el-dialog>
    </el-scrollbar>
  </div>
</template>
<script>
import { statisticalOrderList, statisticalDrawInfo, statisticalDraw } from '@/network/api.js'

export default {
  name: 'order',
  data () {
    return {
      info: {},
      searchForm: {
        page: 1,
        limit: 10,
        // date: [new Date(), new Date()],
        // start: formatOnlyDate(),
        // end: formatOnlyDate(),
        date: '',
        start: '',
        end: ''
      },
      count: 0, // 总记录数
      table: [],
      dataList: [],
      superToPlatTable: [], // 超管给平台划账
      superToOperateTable: [], // 超管给运营划账
      platToOperateTable: [], // 平台给运营划账
      toStoreTable: [], // 运营给商户划账
      toSenderTable: [], // 运营给骑手划账
      superToPlatVisible: false, // 超管给平台划账
      superToOperateVisible: false, // 超管给运营划账
      platToOperateVisible: false, // 平台给运营划账
      toStoreVisible: false, // 运营给商户划账
      toSenderVisible: false // 运营给骑手划账
    }
  },
  created () {
    const info = this.$storage.get('info')
    if (info === undefined) {
      return this.$message.error('登录失效，请重新登录')
    }
    this.info = info
    this.search()
  },
  computed: {
    statusName () {
      return (status) => {
        switch (status) {
          case 0: return '已下单'
          case 1: return '商家接单'
          case 2: return '配送员接单'
          case 3: return '配送员送货'
          case 4: return '配送员确认送达'
          case 5: return '待评价'
          case 6: return '已评价'
          case 7: return '系统评价'
          case -1: return '申请退款'
          case -2: return '同意退款'
          case -3: return '拒绝退款'
          case -4: return '取消订单'
        }
      }
    }
  },
  methods: {
    handleSelectionChange (val) {
      this.dataList = val.map(v => v.order_ids)
    },
    reload () {
      location.reload()
    },
    dateChange (v) {
      if (v === null) {
        this.searchForm.start = ''
        this.searchForm.end = ''
      } else {
        this.searchForm.start = v[0] + ' 00:00:00'
        this.searchForm.end = v[1] + ' 23:59:59'
      }
    },
    async search () {
      try {
        const rtn = await statisticalOrderList(this.searchForm)
        this.table = rtn.data.list
        this.count = rtn.data.count
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 每页条数变化
    handleSizeChange (val) {
      this.searchForm.limit = val
      this.search()
    },
    // 当前页变化
    handleCurrentChange (val) {
      this.searchForm.page = val
      this.search()
    },
    // 划账
    drawInfo (type) {
      if (this.searchForm.start === '' || this.searchForm.end === '') {
        return this.$message.error('请先选择时间段')
      }
      this.$confirm(`您将对${this.searchForm.start} 至 ${this.searchForm.end}进行划账, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const formdata = {
            start: this.searchForm.start,
            end: this.searchForm.end,
            type
          }
          const rtn = await statisticalDrawInfo(formdata)
          switch (type) {
            case 1: // 超管给平台划账
              this.superToPlatVisible = true
              this.superToPlatTable = rtn.data.info
              break
            case 2: // 超管给运营划账
              this.superToOperateVisible = true
              this.superToOperateTable = rtn.data.info
              break
            case 3: // 平台给运营划账
              this.platToOperateVisible = true
              this.platToOperateTable = rtn.data.info
              break
            case 4: // 运营给商户划账
              this.toStoreVisible = true
              this.toStoreTable = rtn.data.info
              break
            case 5: // 运营给骑手划账
              this.toSenderVisible = true
              this.toSenderTable = rtn.data.info
              break
          }
        } catch (e) {
          this.$message.error(e.message)
        }
      }).catch(() => { })
    },
    // 关闭弹出前操作(不包括取消按钮)
    handleClose (done) {
      // return (done) => {
      this.dataList = []
      done()
      // }
    },
    // 取消按钮
    close (visibleName) {
      this.dataList = []
      this[visibleName] = false
    },
    draw (visible, type) {
      if (this.searchForm.start === '' || this.searchForm.end === '') {
        return this.$message.error('请先选择时间段')
      }
      if (this.dataList.length === 0) {
        return this.$message.error('请至少勾选一个')
      }
      this.$confirm('您将要划账, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const formdata = {
            start: this.searchForm.start,
            end: this.searchForm.end,
            type,
            data: this.dataList
          }
          await statisticalDraw(formdata)
          this.dataList = []
          this.search()
          this[visible] = false
        } catch (e) {
          this.$message.error(e.message)
        }
      }).catch(() => { })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
